import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, Platform, TouchableOpacity, PixelRatio,
	ActivityIndicator, FlatList, findNodeHandle,
	UIManager
} from "react-native";
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
import { style } from '../../../theme/style';
import { GLOBAL } from '../../../config/global';
import { reportStyle } from './_common/style';
import chartOption from './_common/chartOption';
import Echarts from 'native-echarts';
import HTTP from '../../../utils/http';
import { API, API_GENERATE } from '../../../config/api';

const scale = GLOBAL.SCALE;
let pageNo = 1;//当前第几页
let colorOjb = {
	pink: '#FF777A',
	darkYellow: '#FFB707',
	blue: '#01AFF1',
	blueGreen: '#86D2BF',
	green: '#9CD95B',
	buttonBlue: '#46ABF5',
	purple: '#9C7CFE',
	yellow: '#FDC54A',
	lightOrange: '#FF812F',
	orange: '#FF812F',
	darkOrange: '#EB7427',
	commonFontColor: '#2A3E51',
	lightFontColor: '#031B31',
};
const creditOccupanyColor = ['#01AFF1', '#FFB707', '#FF777A', '#9C7CFE', '#86D2BF', '#175199']
export class CreditReportSection extends Component {
	constructor(props) {
		super(props);
		let { data, reponsederCapture } = props;
		this.state = {
			_isLoad: false,
			loaded: false,
			creditOverview: null,
			creditOccupany: null,
			creditRankingList: null,
			creditOccupanyList: null,
			creditOverdueSummary: null,
			creditOverdueByOrgan: null,
			creditOverdueList: [],
			curRankingType: 'YF',
			totalPage: 0,  //总页数
			footOnoff: true,
			curOverdueTab: 0,
			choice: data && data.choice || { corpId: '' }
		}
		this.reponsederCapture = reponsederCapture || null;
		this.menuData = data && data.menuData || [];
		this._renderContent = this._renderContent.bind(this);
		this.refState = '概况';
	}

	componentWillMount() {
		this.initialPage();
		this.setState({ totalPage: 1 });
	}
	componentWillReceiveProps(props) {
		if (this.state.choice === props.data.choice) return
		this.setState({
			choice: props.data.choice || { corpId: '' }
		}, () => {
			this.initialPage();
		})
		this.setState({ totalPage: 1 });
	}

	initialPage() {
		this.getReportCreditOverview(); //授信日报概览
		this.getReportCreditOccupany();//授信资金占用
		this.getReportCreditOccupanyDetail();//授信资金占用部门
		this.getReportCreditRanking('YF');//占用企业排行
		this.getReportCreditOverdueSummary(); //授信逾期汇总
		this.getReportCreditOverdueByOrgan(); //授信逾期汇总分公司汇总
	}

	async getReportCreditOverview() {
		this.setState({ loaded: true })
		const response = await HTTP.POST(API_GENERATE(API.GET_REPORT_CREDIT_OVERVIEW), { // TODO
			corpId: this.state.choice.corpId
		});
		this.setState({
			creditOverview: response,
			loaded: false
		})
	}

	async getReportCreditOccupany() {
		const response = await HTTP.POST(API_GENERATE(API.GET_REPORT_CREDIT_OCCUPANY), { bizDate: '', corpId: this.state.choice.corpId });
		this.setState({
			creditOccupany: response
		})
	}

	async getReportCreditOccupanyDetail() {
		const response = await HTTP.POST(API_GENERATE(API.GET_REPORT_CREDIT_OCCUPANY_DETAIL), { bizDate: '', corpId: this.state.choice.corpId });
		this.setState({
			creditOccupanyList: response
		})
	}

	/**
	 * 
	 * @param {*} type YF ：预付,SX：赊销
	 */
	async getReportCreditRanking(type) {
		const response = await HTTP.POST(API_GENERATE(API.GET_REPORT_CREDIT_RANKING), {
			bizDate: '',
			creditKind: type,
			pageNo: 1,
			pageSize: 10,
			corpId: this.state.choice.corpId
		});
		this.setState({
			creditRankingList: response,
			curRankingType: type
		})
	}

	async getReportCreditOverdueSummary() {
		const response = await HTTP.POST(API_GENERATE(API.GET_REPORT_CREDIT_OVERDUE_SUMMARY), { bizDate: '', corpId: this.state.choice.corpId });
		this.setState({
			creditOverdueSummary: response
		})
	}

	async getReportCreditOverdueByOrgan() {
		const response = await HTTP.POST(API_GENERATE(API.GET_REPORT_CREDIT_OVERDUE_BY_ORGAN), { bizDate: '', corpId: this.state.choice.corpId });
		response && response.length ? this.getReportCreditOverdueDetail(response[0].bizLineId, pageNo, true) : null;
		this.setState({
			creditOverdueByOrgan: response
		})
	}

	async getReportCreditOverdueDetail(bizLineId, pageNo, refreshOff) {
		if (refreshOff) {
			this.setState({
				_isLoad: true,
			});
		}

		const responseData = await HTTP.POST(API_GENERATE(API.GET_REPORT_CREDIT_OVERDUE_DETAIL), {
			bizDate: '',
			bizLineId,
			pageNo,
			pageSize: 9999,
			corpId: this.state.choice.corpId
		});

		if (refreshOff) {  // 下拉刷新
			if (responseData.rows && responseData.rows.length) {
				this.setState({
					_isLoad: false,
					creditOverdueList: responseData.rows,
					totalPage: responseData.totalPage,
				});
			} else {  //没数据
				this.setState({
					_isLoad: false,
					creditOverdueList: responseData.rows,
				});
			}
		} else { // 上拉加载
			let len = responseData.rows ? responseData.rows.length : 0;
			this.setState({
				creditOverdueList: this.state.creditOverdueList.concat(responseData.rows || []),
				footOnoff: false,
				nowList: this.state.nowList + len
			});
		}
	}

	setContentTitle(curMenu) {
		if (curMenu == 'overview') {
			return '授信占用概览'
		} else if (curMenu == 'occupation') {
			return '授信类型资金占用'
		} else if (curMenu == 'ranking') {
			return '授信资金占用-企业排行'
		} else if (curMenu == 'overdue') {
			return '授信逾期'
		}
	}

	setOption(curMenu) {
		if (curMenu == 'typesOccupation') {
			const { creditOccupany } = this.state;
			const { qhAmount, advanceAmount, tickAmount } = creditOccupany || {};
			chartOption.SET_OPTIONS.TYPESOCCUPATION.series[0].data = [
				{ value: advanceAmount || 0, name: '预付占用' },
				{ value: tickAmount || 0, name: '赊销占用' },
				{ value: qhAmount || 0, name: '泉化占用' },
			]
			return chartOption.SET_OPTIONS.TYPESOCCUPATION
		} else if (curMenu == 'deptOccupation') {
			const { creditOccupanyList } = this.state;
			chartOption.SET_OPTIONS.DEPTOCCUPATION.color = creditOccupanyColor;
			chartOption.SET_OPTIONS.DEPTOCCUPATION.series[0].data = [];

			creditOccupanyList && creditOccupanyList.length && creditOccupanyList.map((item, index) => {
				chartOption.SET_OPTIONS.DEPTOCCUPATION.series[0].data.push({ value: item.checkAmount || 0, name: item.bizLineName || 0 })
			})
			return chartOption.SET_OPTIONS.DEPTOCCUPATION
		}
	}

	renderDateList(curMenu) {
		const { creditOverview, creditOccupany, creditOccupanyList, creditRankingList } = this.state;
		if (curMenu == 'overview') {
			return creditOverview ? this._renderOverview() : null;
		}
		else if (curMenu == 'occupation') {
			return (
				<View style={{ backgroundColor: style.color.bgGray }}>
					{creditOccupany ? this._renderOccupation() : null}
					{creditOccupanyList ? this._renderDeptOccupation() : null}
				</View>
			)
		}
		else if (curMenu == 'ranking') {
			return creditRankingList ? this._renderRanking() : null;
		}
		else if (curMenu == 'overdue') {
			return this._renderOverdue();
		}
	}
	//概览
	_renderOverview() {
		const { creditOverview } = this.state;
		const { creditOccupanyAmount, creditOccupanyRate, creditOccupanyCnt, creditOccupanyCom,
			creditOccurAmount, creditOccurRate, creditOccurCnt, creditOccurCom, writeOffAmount,
			writeOffRate, writeOffCnt, writeOffCom, overdueAmount, overdueRate, overdueCnt, overdueCom } = creditOverview || {};
		const yellowBorder = require('../../../imgs/yellowBorder.png');
		const upDegreen = require('../../../imgs/upDegreen.png');
		const downDegreen = require('../../../imgs/downDegreen.png');

		return (
			<View style={styles.panelViewDataList}>
				<View style={styles.overviewItem}>
					<Image source={yellowBorder}></Image>
					<View style={styles.overviewItemValue}>
						<Text style={styles.overviewItemAmountLabel}>授信占用（万元）</Text>
						<View style={styles.overviewItemAmountView}>
							<Text style={styles.overviewItemAmountValue}>{creditOccupanyAmount || 0}</Text>
							<Image source={creditOccupanyRate > 0 ? upDegreen : downDegreen} style={styles.degreenImg}></Image>
							<Text style={{ color: creditOccupanyRate > 0 ? '#D81E06' : '#25CE50' }}>{creditOccupanyRate || 0}%</Text>
						</View>
						<Text style={styles.overviewItemAmountLabel}>企业（家）：{creditOccupanyCom || 0}  |  订单（笔）：{creditOccupanyCnt || 0}</Text>
					</View>
				</View>
				<View style={styles.overviewItem}>
					<Image source={yellowBorder} style={{ tintColor: colorOjb.lightOrange }}></Image>
					<View style={styles.overviewItemValue}>
						<Text style={styles.overviewItemAmountLabel}>授信实际发生（万元）</Text>
						<View style={styles.overviewItemAmountView}>
							<Text style={styles.overviewItemAmountValue}>{creditOccurAmount || 0} </Text>
							<Image source={creditOccurRate > 0 ? upDegreen : downDegreen} style={styles.degreenImg}></Image>
							<Text style={{ color: creditOccurRate > 0 ? '#D81E06' : '#25CE50' }}>{creditOccurRate || 0}%</Text>
						</View>
						<Text style={styles.overviewItemAmountLabel}>企业（家）：{creditOccurCom || 0}  |  订单（笔）：{creditOccurCnt || 0}</Text>
					</View>
				</View>
				<View style={styles.overviewItem}>
					<Image source={yellowBorder} style={{ tintColor: colorOjb.orange }}></Image>
					<View style={styles.overviewItemValue}>
						<Text style={styles.overviewItemAmountLabel}>授信已核销（万元）</Text>
						<View style={styles.overviewItemAmountView}>
							<Text style={styles.overviewItemAmountValue}>{writeOffAmount || 0} </Text>
							<Image source={writeOffRate > 0 ? upDegreen : downDegreen} style={styles.degreenImg}></Image>
							<Text style={{ color: writeOffRate > 0 ? '#D81E06' : '#25CE50' }}>{writeOffRate || 0}%</Text>
						</View>
						<Text style={styles.overviewItemAmountLabel}>企业（家）：{writeOffCom || 0}  |  订单（笔）：{writeOffCnt || 0}</Text>
					</View>
				</View>
				<View style={styles.overviewItem}>
					<Image source={yellowBorder} style={{ tintColor: colorOjb.darkOrange }}></Image>
					<View style={styles.overviewItemValue}>
						<Text style={styles.overviewItemAmountLabel}>授信已逾期（万元）</Text>
						<View style={styles.overviewItemAmountView}>
							<Text style={styles.overviewItemAmountValue}>{overdueAmount || 0} </Text>
							<Image source={overdueRate > 0 ? upDegreen : downDegreen} style={styles.degreenImg}></Image>
							<Text style={{ color: overdueRate > 0 ? '#D81E06' : '#25CE50' }}>{overdueRate || 0}%</Text>
						</View>
						<Text style={styles.overviewItemAmountLabel}>企业（家）：{overdueCom || 0}  |  订单（笔）：{overdueCnt || 0}</Text>
					</View>
				</View>
			</View>
		)
	}
	//授信类型占比
	_renderOccupation() {
		const { creditOccupany } = this.state;
		const { qhAmount, advanceAmount, tickAmount, occupanySumAmount } = creditOccupany || {};
		let laData = this.setOption('typesOccupation');
		return (
			<View style={styles.occupationViewDataList}>
				<View style={{ width: 360 * scale, height: 200 * scale, flexDirection: 'row', justifyContent: 'center' }}>
					{laData ? <Echarts width={360 * scale} height={200 * scale} option={laData} /> : null}
				</View>

				<View style={styles.typesOccupationInfoView}>
					<Text style={styles.typesOccupationInfoLabel}>实际占用总额（万元)</Text>
					<View style={styles.typesOccupationInfoItem}>
						<View style={{ flexDirection: 'row' }}>
							<View style={[styles.typesOccupationInfoItemLengd, { backgroundColor: colorOjb.pink }]}></View>
							<Text style={styles.typesOccupationInfoItemLabel}>预付占用</Text>
						</View>
						<Text style={styles.typesOccupationInfoItemValue}>{advanceAmount || 0}</Text>
					</View>
					<View style={styles.typesOccupationInfoItem}>
						<View style={{ flexDirection: 'row' }}>
							<View style={[styles.typesOccupationInfoItemLengd, { backgroundColor: colorOjb.darkYellow }]}></View>
							<Text style={styles.typesOccupationInfoItemLabel}>赊销占用</Text>
						</View>
						<Text style={styles.typesOccupationInfoItemValue}>{tickAmount || 0}</Text>
					</View>
					<View style={styles.typesOccupationInfoItem}>
						<View style={{ flexDirection: 'row' }}>
							<View style={[styles.typesOccupationInfoItemLengd, { backgroundColor: colorOjb.blue }]}></View>
							<Text style={styles.typesOccupationInfoItemLabel}>泉化占用</Text>
						</View>
						<Text style={styles.typesOccupationInfoItemValue}>{qhAmount || 0}</Text>
					</View>
					<View style={styles.typesOccupationInfoItem}>
						<View style={{ flexDirection: 'row' }}>
							<Text style={[styles.typesOccupationInfoItemLabel, { marginLeft: 55 * scale }]}>合计</Text>
						</View>
						<Text style={styles.typesOccupationInfoItemValue}>{occupanySumAmount || 0}</Text>
					</View>
				</View>
			</View>
		)
	}
	//部门授信资金占用
	_renderDeptOccupation() {
		const { creditOccupanyList, creditOccupany } = this.state;
		const { advanceAmount, tickAmount, advanceTickSumAmount } = creditOccupany || {}
		let laData = this.setOption('deptOccupation');
		return (
			<View style={styles.occupationViewDataList}>
				<View style={reportStyle.panelViewTitleView}>
					<Text style={reportStyle.panelViewTitle}>产品授信资金占用</Text>
				</View>
				<View style={styles.panelViewChartView}>
					<View style={{ width: 360 * scale, height: 200 * scale, flexDirection: 'row', justifyContent: 'center' }}>
						{laData ? <Echarts width={360 * scale} height={200 * scale} option={laData} /> : null}
					</View>
				</View>

				<View style={styles.typesOccupationInfoView}>
					{
						creditOccupanyList && creditOccupanyList.length ?
							creditOccupanyList.map((item, index) => {
								return (
									<View key={index} style={styles.deptOccupationInfoItem}>
										<View style={styles.deptOccupationInfoItemValue}>
											<View style={[styles.typesOccupationInfoItemLengd, { backgroundColor: creditOccupanyColor[index] }]}></View>
											<Text style={styles.typesOccupationInfoItemLabel}>{item.bizLineName}</Text>
										</View>
										<View style={styles.deptOccupationInfoItemValue}>
											<Text style={styles.deptOccupationInfoItemLabel}>预付实际占用</Text>
											<Text style={styles.deptOccupationInfoItemLabel}>赊销实际占用</Text>
											<Text style={styles.deptOccupationInfoItemLabel}>合计</Text>
										</View>
										<View style={styles.deptOccupationInfoItemValue}>
											<Text style={styles.deptOccupationInfoItemLabel}>{item.advanceCheckAmount || 0}</Text>
											<Text style={styles.deptOccupationInfoItemLabel}>{item.creditCheckAmount || 0}</Text>
											<Text style={styles.deptOccupationInfoItemLabel}>{item.checkAmount || 0}</Text>
										</View>
									</View>
								)
							}) : null
					}
					<View style={styles.deptOccupationInfoItem}>
						<View style={styles.deptOccupationInfoItemValue}>
							<View style={[styles.typesOccupationInfoItemLengd]}></View>
							<Text style={styles.typesOccupationInfoItemLabel}>合计</Text>
						</View>
						<View style={styles.deptOccupationInfoItemValue}>
							<Text style={styles.deptOccupationInfoItemLabel}>预付实际占用</Text>
							<Text style={styles.deptOccupationInfoItemLabel}>赊销实际占用</Text>
							<Text style={styles.deptOccupationInfoItemLabel}>合计</Text>
						</View>
						<View style={styles.deptOccupationInfoItemValue}>
							<Text style={styles.deptOccupationInfoItemLabel}>{advanceAmount || 0}</Text>
							<Text style={styles.deptOccupationInfoItemLabel}>{tickAmount || 0}</Text>
							<Text style={styles.deptOccupationInfoItemLabel}>{advanceTickSumAmount || 0}</Text>
						</View>
					</View>
				</View>
			</View>
		)
	}
	//占用企业排行
	_renderRanking() {
		const { creditRankingList, curRankingType } = this.state;
		const topThreeColor = [colorOjb.blueGreen, colorOjb.darkYellow, colorOjb.blue]
		return (
			<View style={styles.rankingDataList}>
				<View style={styles.rankingHeaderView}>
					<View style={styles.rankingHeaderTabs}>
						<TouchableOpacity style={[styles.rankingHeaderTabsItem, curRankingType == 'YF' ? styles.rankingCheckedStyle : null]} onPress={() => this.getReportCreditRanking('YF')}>
							<Text style={[styles.rankingHeaderTabsValue, curRankingType == 'YF' ? styles.rankingCheckedTextStyle : styles.rankingUncheckedTextStyle]}>预付</Text>
						</TouchableOpacity>
						<TouchableOpacity style={[styles.rankingHeaderTabsItem, curRankingType == 'SX' ? styles.rankingCheckedStyle : null]} onPress={() => this.getReportCreditRanking('SX')}>
							<Text style={[styles.rankingHeaderTabsValue, curRankingType == 'SX' ? styles.rankingCheckedTextStyle : styles.rankingUncheckedTextStyle]}>赊销</Text>
						</TouchableOpacity>
					</View>
					<View style={styles.rankingHeaderTabsLabel}>
						<Text style={styles.rankingHeaderTabsLabelText}>单位：万元</Text>
					</View>
				</View>
				<View style={styles.rankingDataListView}>
					{
						creditRankingList && creditRankingList.rows && creditRankingList.rows.length ?
							creditRankingList.rows.map((item, index) => {
								return (
									<View key={index} style={styles.rankingDataListItem}>
										<View style={styles.rankingDataListItemInfo}>
											<Text style={[styles.rankingDataListItemInfoIndex, { color: index < 3 ? topThreeColor[index] : '#A1A8A7' }]}>{index + 1}</Text>
											<View style={styles.rankingDataListItemDegreenView}>
												<View style={{
													width: (Number(item.notCheckAmount) / Number(item.notCheckAmountSum || 1)) * 230 * scale,
													height: 9 * scale,
													backgroundColor: index < 3 ? topThreeColor[index] : '#C5CACE',
													borderRadius: 4 * scale
												}}></View>
											</View>
											<Text style={styles.rankingDataListItemInfoAmount}>{item.notCheckAmount}</Text>
										</View>
										<Text style={styles.rankingDataListItemInfoCompany}>{item.companyName}</Text>
									</View>
								)
							})
							: <View style={{ marginBottom: 10 * scale }}><Text style={{ textAlign: 'center', fontSize: 16 * scale }}>暂无排名</Text></View>
					}
				</View>
				{
					creditRankingList && creditRankingList.rows && creditRankingList.rows.length ?
						<TouchableOpacity style={styles.rankingFooterView} onPress={() => { this.props.goRankingRpt() }}>
							<Image source={require('../../../imgs/rankingFooterBg.png')}></Image>
							<Text style={styles.rankingFooterText}>查看全部企业排行</Text>
						</TouchableOpacity> : null
				}
			</View>
		)
	}
	//授信逾期情况
	_renderOverdue() {
		const { creditOverdueSummary, creditOverdueByOrgan, creditOverdueList, curOverdueTab, _isLoad } = this.state;
		const { overdueCnt, oneToThreeCnt, fourToSevenCnt } = creditOverdueSummary || {};
		const totalCnt = Number(overdueCnt || 0) + Number(oneToThreeCnt || 0) + Number(fourToSevenCnt || 0);
		return (
			<View>
				{
					creditOverdueSummary ?
						<View style={styles.overdueChartDataView}>
							<View style={styles.overdueOutCircleView}>
								<View style={styles.overdueInnerCircleView}>
									<Text style={styles.overdueInnerCircleText}>{totalCnt}</Text>
									<Text style={styles.overdueInnerCircleText}>授信逾期</Text>
								</View>
							</View>
							<View style={styles.panelViewChartLabel}>
								<View style={[styles.rankingDataListItemInfo, { marginBottom: 14 * scale }]}>
									<Text style={styles.overdueDataListItemInfoIndex}>      已逾期</Text>
									<View style={styles.overdueDataListItemDegreenView}>
										<View style={{ width: (Number(overdueCnt || 0) / (totalCnt || 1)) * 120 * scale, height: 9 * scale, backgroundColor: colorOjb.blue, borderRadius: 4 * scale }}></View>
									</View>
									<Text style={styles.overdueDataListItemInfoIndex}>{overdueCnt || 0}笔</Text>
								</View>
								<View style={[styles.rankingDataListItemInfo, , { marginBottom: 14 * scale }]}>
									<Text style={styles.overdueDataListItemInfoIndex}>1-3天逾期</Text>
									<View style={styles.overdueDataListItemDegreenView}>
										<View style={{ width: (Number(oneToThreeCnt || 0) / (totalCnt || 1)) * 120 * scale, height: 9 * scale, backgroundColor: colorOjb.purple, borderRadius: 4 * scale }}></View>
									</View>
									<Text style={styles.overdueDataListItemInfoIndex}>{oneToThreeCnt || 0}笔</Text>
								</View>
								<View style={[styles.rankingDataListItemInfo, { marginBottom: 14 * scale }]}>
									<Text style={[styles.overdueDataListItemInfoIndex]}>4-7天逾期</Text>
									<View style={styles.overdueDataListItemDegreenView}>
										<View style={{ width: (Number(fourToSevenCnt || 0) / (totalCnt || 1)) * 120 * scale, height: 9 * scale, backgroundColor: colorOjb.darkYellow, borderRadius: 4 * scale }}></View>
									</View>
									<Text style={styles.overdueDataListItemInfoIndex}>{fourToSevenCnt || 0}笔</Text>
								</View>
							</View>
						</View> : null
				}

				<View style={{ flexDirection: 'row', marginLeft: 8 * scale }}>
					{
						creditOverdueByOrgan && creditOverdueByOrgan.length ?
							creditOverdueByOrgan.map((item, index) => {
								return (
									<TouchableOpacity key={index}
										style={index === curOverdueTab ? styles.overdueTabChecked : null}
										onPress={() => {
											this.setState({ curOverdueTab: index, curOrganId: item.bizLineId }, () => {
												this._isLoadRefresh();
											});
										}}>
										<Text style={[styles.overdueTabText, index === curOverdueTab ? styles.overdueTabTextChecked : null]}>{item.bizLineName}</Text>
									</TouchableOpacity>
								)
							}) : null
					}
				</View>
				{
					creditOverdueByOrgan && creditOverdueByOrgan.length && creditOverdueByOrgan[curOverdueTab] &&
						creditOverdueByOrgan[curOverdueTab].overdueList && creditOverdueByOrgan[curOverdueTab].overdueList.length ?
						creditOverdueByOrgan[curOverdueTab].overdueList.map((item, index) => {
							return (
								<View key={index} style={styles.overdueMiddleInfoView}>
									<View style={styles.typesOccupationInfoItem}>
										<Text style={styles.overdueMiddleInfoLabel}></Text>
										<Text style={styles.overdueMiddleInfoLabel}>订单（笔）</Text>
										<Text style={styles.overdueMiddleInfoLabel}>企业（家）</Text>
										<Text style={styles.overdueMiddleInfoLabel}>金额（万元）</Text>
									</View>
									<View key={index} style={styles.typesOccupationInfoItem}>
										<View style={styles.overdueMiddleItemLabelView}>
											<View style={[styles.typesOccupationInfoItemLengd, { backgroundColor: colorOjb.blue }]}></View>
											<Text style={styles.typesOccupationInfoItemLabel}>{chartOption.OVERDUE_TYPE[item.dataType]}</Text>
										</View>
										<Text style={styles.overdueMiddleInfoItemValue}>{item.overdueCnt}</Text>
										<Text style={styles.overdueMiddleInfoItemValue}>{item.overdueCom}</Text>
										<Text style={styles.overdueMiddleInfoItemValue}>{item.overdueAmount}</Text>
									</View>
								</View>
							)
						}) : null
				}
				{
					creditOverdueList && creditOverdueList.length ?
						<View style={styles.overdueBottomInfoView}>
							<Text style={styles.overdueBottomInfoTitle}>已逾期明细</Text>
							<View style={styles.overdueBottomInfoList}
								onStartShouldSetResponderCapture={() => {
									this.reponsederCapture()
								}}>
								{
									creditOverdueList.map((item, index) => {
										return (
											this._renderItemView({ item, index })
										)
									})
								}
								{/* <FlatList
									data={creditOverdueList}
									extraData={this.state}
									renderItem={this._renderItemView}
									refreshing={_isLoad}
									onRefresh={this._isLoadRefresh.bind(this)}
									onEndReachedThreshold={0.8}
									ListFooterComponent={this._renderFooter.bind(this)}
									onEndReached={this._onEndReached.bind(this)} /> */}
							</View>
						</View>
						: null}
			</View>
		)
	}

	_renderItemView(data) {
		const { companyName, orderId, overdueAmount, sourceDate, overdueDate, overdueDay } = data.item
		return (
			<View key={data.index} style={styles.overdueBottomInfoItem}>
				<Text style={styles.overdueBottomInfoItemTitle}>{companyName}</Text>
				<View style={styles.overdueBottomInfoItemCard}>
					<View style={styles.overdueBottomInfoItemCardHeader}>
						<Text style={styles.overdueBottomInfoItemCardHeaderText}>{orderId}</Text>
						<Text style={styles.overdueBottomInfoItemCardHeaderText}>销售</Text>
					</View>
					<View style={styles.overdueBottomInfoItemCardDetail}>
						<View style={styles.overdueBottomInfoItemCardAmount}>
							<Text style={styles.overdueBottomInfoItemCardAmountLabel}>逾期金额（万元）</Text>
							<Text style={styles.overdueBottomInfoItemCardAmountValue}>{overdueAmount}</Text>
						</View>
						<View style={styles.overdueBottomInfoItemCardDate}>
							<Text style={styles.overdueBottomInfoItemCardCommonLabel}>发生日</Text>
							<Text style={styles.overdueBottomInfoItemCardCommonLabel}>到期日</Text>
							<Text style={styles.overdueBottomInfoItemCardCommonLabel}>逾期（天）</Text>
						</View>
						<View style={styles.overdueBottomInfoItemCardDate}>
							<Text style={styles.overdueBottomInfoItemCardCommonLabel}>{sourceDate}</Text>
							<Text style={styles.overdueBottomInfoItemCardCommonLabel}>{overdueDate}</Text>
							<Text style={styles.overdueBottomInfoItemCardCommonLabel}>{overdueDay}</Text>
						</View>
					</View>
				</View>
			</View>
		)
	}
	// 下拉更新函数
	async _isLoadRefresh() {
		pageNo = 1;
		await this.getReportCreditOverdueDetail(this.state.curOrganId, pageNo, true);
	}

	// 上拉更新函数
	_onEndReached() {
		if (pageNo < this.state.totalPage) {
			pageNo++;
			this.getReportCreditOverdueDetail(this.state.curOrganId, pageNo);
		} else {
			this.setState({
				footOnoff: false
			});
		}
	}

	/*for FlatList的底部*/
	_renderFooter() {
		return <View>
			<ActivityIndicator
				style={this.state.footOnoff ? null : styles.disNone}
				animating={this.state.footOnoff}
				size="large"
				color="orange"
			/>
		</View>
	}
	_renderContent(curMenu) {
		const { loaded } = this.state;
		return (
			<View style={styles.panelViewContainer}>
				<View style={reportStyle.panelViewTitleView}>
					<Text style={reportStyle.panelViewTitle}>{this.setContentTitle(curMenu)}</Text>
				</View>

				{loaded ? null : this.renderDateList(curMenu)}
			</View>
		);
	}

	_handleTabHeight(obj) {
		//通过ref获得当前页面的高度计算方法
		this.refs[obj.ref.props.tabLabel].measure(this._setTabHeight.bind(this));
		this.refState = obj.ref.props.tabLabel;
	}

	_setTabHeight(ox, oy, width, height, px, py) {
		const { creditOverview, creditRankingList } = this.state;
		//高度不为零时进行高度计算
		if (height != 0) {
			//获取左右的高度
			this.setState((prevState, props) => ({
				height,
			}));
			//判断是否是第一次取高度
			if (!this.state.firstTabSwitch) {
				//动态更改view的高度
				this.setState((prevState, props) => ({
					tabViewStyle: { height: this.state.height + 40 },
				}));
			} else {
				this.setState({
					firstTabSwitch: false
				})
			}
		}
	}

	//
	_switchKey = (text) => {
		let reseultText = 'overview';
		if (text == '授信资金占用') {
			reseultText = 'occupation';
		} else if (text == '占用企业排行') {
			reseultText = 'ranking';
		} else if (text == '授信逾期情况') {
			reseultText = 'overdue';
		}
		return reseultText;
	}

	// android 使用
	_layout(e) {
		let fullHeight = Platform.OS === 'android' ? 100 : 40;
		return new Promise((resolve) => {
			UIManager.measure(e.target, (x, y, width, height, pageX, pageY) => {
				this.setState((prevState, props) => ({
					tabViewStyle: { height: (height + fullHeight) * scale },
				}));
				resolve({
					x,
					y,
					width,
					height,
					pageX,
					pageY
				});
			});
		});
	}

	render() {
		const { loaded } = this.state;
		loadedCell = loaded ?
			<View style={styles.loadedCell}>
				<ActivityIndicator
					animating={true}
					color={'#fff'}
					size="small"
				/>
			</View> : null;
		const scrollableTabView = this.menuData.map(item => {
			const { key, text } = item;
			return (
				<TouchableOpacity activeOpacity={1} tabLabel={text} key={key} ref={text}>
					<View style={styles.panelCellView}>
						{this._renderContent(key)}
					</View>
				</TouchableOpacity>
			);
		});
		return (
			<View style={styles.container}>
				<ScrollableTabView
					initialPage={0}
					locked={this.state.loaded}
					onChangeTab={(obj) => {
						// setTimeout(() => {
						this._handleTabHeight(obj)
						// }, 1000)

					}}
					style={this.state.tabViewStyle}
					renderTabBar={() =>
						<DefaultTabBar
							style={{ borderBottomWidth: 0.5 }}
							underlineStyle={styles.tabBarUnderline}
							tabsContainerStyle={{ justifyContent: 'flex-start' }}
						/>}
					tabBarActiveTextColor='#031B31'
					tabBarInactiveTextColor='#fff'
					tabBarTextStyle={{ fontSize: 12 * scale, color: '#031B31' }}
				>
					{scrollableTabView}
				</ScrollableTabView>

				{
					Platform.OS === 'android' ? <View style={styles.adAtive} onLayout={({ nativeEvent: e }) => this._layout(e)}>
						{this._renderContent(this._switchKey(this.refState))}
					</View> : null
				}
			</View >
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		minHeight: 200 * scale
	},
	panelCellView: {
		width: '94%',
		marginLeft: '3%',
		alignItems: 'center',
		marginTop: 20 * scale,
		marginBottom: 24 * scale,
		backgroundColor: '#fff',
		borderRadius: 10 * scale,
	},
	tabBarUnderline: {
		height: 0,
		width: 0,
		overflow: 'hidden',
		borderColor: '#EDF1FA',
		borderBottomColor: '#000',
		borderWidth: 10,
		borderLeftWidth: 5,
		borderRightWidth: 5,
		backgroundColor: 'transparent',
		marginLeft: 43,
		// position: 'absolute',
		// left: '50%'
	},
	panelViewContainer: {
		width: '100%',
	},
	panelViewChartView: {
		// padding: 14 * scale
	},
	panelViewDataListLabel: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		marginLeft: 88 * scale
	},
	stockDataListLabel: {
		flex: 1,
		color: 'rgba(3,27,49,0.5)',
		fontSize: 12 * scale,
		padding: 10 * scale
	},
	panelViewDataListItemView: {
		borderTopColor: '#D0D1D2',
		borderTopWidth: 1 / PixelRatio.get(),
		paddingTop: 14 * scale,
		paddingBottom: 14 * scale,
	},
	panelViewDataListItemTipView: {
		width: 88 * scale,
		backgroundColor: 'rgba(1,176,240,.6)',
		paddingTop: 6 * scale,
		paddingBottom: 6 * scale,
		paddingLeft: 14 * scale,
		borderBottomEndRadius: 8 * scale,
		borderTopRightRadius: 8 * scale,
	},
	panelViewDataListItemTip: {
		color: '#fff',
		fontSize: 12 * scale,
	},
	panelViewDataListItem: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-start',
		paddingLeft: 14 * scale,
		paddingTop: 18 * scale,
	},
	panelViewDataListItemLabel: {
		flex: 1,
		fontSize: 12 * scale,
		color: 'rgba(3,27,49,0.7)',
	},
	panelViewDataListItemValue: {
		flex: 1,
		textAlign: 'center',
		fontSize: 13 * scale,
		color: 'rgba(3,27,49,1)',
		fontWeight: '400'
	},
	priceDataListLabel: {
		textAlign: 'center',
		fontSize: 12 * scale,
		marginBottom: 10 * scale
	},
	priceDataListItem: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
	},
	priceViewDataList: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		marginLeft: 88 * scale,
		marginRight: 18 * scale
	},
	priceDataListLabelView: {
		flex: 1,
		flexDirection: 'column',
		alignItems: 'flex-end',
	},
	priceDataListLabelBorder: {
		width: '40%',
		height: 3 * scale
	},
	borderCircle: {
		width: 4 * scale,
		height: 4 * scale
	},
	overviewItem: {
		flexDirection: 'row',
		marginLeft: 24 * scale,
		marginBottom: 24 * scale
	},
	overviewItemValue: {
		flex: 1,
		flexDirection: 'column',
		marginLeft: 24 * scale,
	},
	overviewItemAmountView: {
		flexDirection: 'row',
	},
	overviewItemAmountLabel: {
		marginBottom: 18 * scale,
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale
	},
	overviewItemAmountValue: {
		marginBottom: 18 * scale,
		marginRight: 18 * scale,
		color: colorOjb.commonFontColor,
		fontSize: 14 * scale,
		fontWeight: '800',
	},
	degreenImg: {
		width: 13 * scale,
		height: 17 * scale,
		marginRight: 4 * scale
	},
	occupationViewDataList: {
		marginBottom: 24 * scale,
		backgroundColor: '#FFF',
		borderRadius: 10 * scale
	},
	typesOccupationInfoView: {
		paddingBottom: 28 * scale
	},
	typesOccupationInfoLabel: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
		textAlign: 'right',
		paddingRight: 18 * scale
	},
	typesOccupationInfoItem: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		marginTop: 18 * scale,
		paddingLeft: 18 * scale,
		paddingRight: 24 * scale,
	},
	typesOccupationInfoItemLengd: {
		height: 14 * scale,
		width: 24 * scale,
		borderRadius: 7 * scale
	},
	typesOccupationInfoItemLabel: {
		color: colorOjb.lightFontColor,
		fontSize: 12 * scale,
		marginLeft: 5 * scale,
		fontWeight: '100',
	},
	typesOccupationInfoItemValue: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
		fontWeight: '800'
	},
	deptOccupationInfoItem: {
		flexDirection: 'column',
		alignItems: 'flex-start',
		justifyContent: 'center',
		borderBottomColor: '#D0D1D2',
		borderBottomWidth: 1 / PixelRatio.get(),
		paddingLeft: 18 * scale,
		paddingRight: 24 * scale,
		paddingBottom: 18 * scale
	},
	deptOccupationInfoItemLabel: {
		flex: 1,
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
		textAlign: 'right'
	},
	deptOccupationInfoItemValue: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		marginTop: 18 * scale
	},
	deptChartTitle: {
		width: 88 * scale,
		position: 'absolute',
		top: 88 * scale,
		left: '39%',
		flexWrap: 'wrap',
		color: colorOjb.lightFontColor,
		fontSize: 12 * scale,
		fontWeight: '100',
		textAlign: 'center'
	},
	rankingHeaderTabs: {
		width: 160 * scale,
		height: 28 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		borderColor: '#46ABF5',
		borderWidth: 1 * scale,
		borderRadius: 15 * scale
	},
	rankingHeaderTabsItem: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
		height: 28 * scale,
		borderRadius: 15 * scale
	},
	rankingHeaderTabsValue: {
		color: '#fff',
		fontSize: 12 * scale,
	},
	rankingCheckedStyle: {
		backgroundColor: '#46ABF5',
	},
	rankingCheckedTextStyle: {
		fontWeight: '800'
	},
	rankingUncheckedTextStyle: {
		color: '#46ABF5',
	},
	rankingHeaderView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
	},
	rankingHeaderTabsLabel: {
		marginLeft: 20 * scale,
		marginRight: 30 * scale,
	},
	rankingHeaderTabsLabelText: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
	},
	rankingDataListView: {
		paddingLeft: 18 * scale,
		paddingRight: 30 * scale,
		marginTop: 50 * scale
	},
	rankingDataListItem: {
		marginBottom: 28 * scale
	},
	rankingDataListItemInfo: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	rankingDataListItemInfoIndex: {
		color: '#A1A8A7',
		fontSize: 12 * scale,
		fontWeight: '800'
	},
	rankingDataListItemDegreenView: {
		width: 230 * scale,
		height: 9 * scale,
		backgroundColor: '#F6F6F6',
		borderRadius: 4 * scale
	},
	rankingDataListItemInfoAmount: {
		color: colorOjb.commonFontColor,
		fontWeight: '800',
		fontSize: 12 * scale
	},
	rankingDataListItemInfoCompany: {
		color: colorOjb.commonFontColor,
		fontSize: 10 * scale,
		textAlign: 'right',
		marginTop: 6 * scale
	},
	rankingFooterText: {
		color: '#fff',
		fontWeight: '800',
		fontSize: 12 * scale,
		position: 'absolute',
		top: 18 * scale,
		left: '34%'
	},
	rankingFooterView: {
		flexDirection: 'row',
		justifyContent: 'center',
		marginTop: 24 * scale,
	},
	overdueDataListItemInfoIndex: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
		marginRight: 10 * scale
	},
	overdueDataListItemDegreenView: {
		width: 120 * scale,
		height: 9 * scale,
		backgroundColor: '#F6F6F6',
		borderRadius: 4 * scale,
		marginRight: 10 * scale
	},
	overdueChartDataView: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		marginBottom: 30 * scale
	},
	overdueOutCircleView: {
		width: 90 * scale,
		height: 90 * scale,
		backgroundColor: colorOjb.green,
		borderRadius: 45 * scale,
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center',
		marginRight: 10 * scale
	},
	overdueInnerCircleView: {
		width: 70 * scale,
		height: 70 * scale,
		backgroundColor: '#fff',
		borderRadius: 35 * scale,
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center'
	},
	overdueInnerCircleText: {
		fontSize: 10 * scale,
		color: colorOjb.commonFontColor,
		marginBottom: 4 * scale
	},
	overdueTabChecked: {
		borderBottomColor: '#031B31',
		borderBottomWidth: 4 * scale
	},
	overdueTabText: {
		padding: 10 * scale,
		fontSize: 12 * scale,
		color: colorOjb.commonFontColor
	},
	overdueTabTextChecked: {
		fontWeight: '800',
		color: '#031B31'
	},
	overdueMiddleInfoItemValue: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
		fontWeight: '800',
		textAlign: 'center',
		flex: 1
	},
	overdueMiddleItemLabelView: {
		flex: 1,
		flexDirection: 'row'
	},
	overdueMiddleInfoView: {
		borderTopColor: '#EEEEEF',
		borderTopWidth: 1 / PixelRatio.get(),
		marginBottom: 30 * scale
	},
	overdueMiddleInfoLabel: {
		color: colorOjb.commonFontColor,
		fontSize: 10 * scale,
		flex: 1,
		textAlign: 'center',
	},
	overdueBottomInfoView: {
		paddingLeft: 18 * scale,
		paddingRight: 18 * scale
	},
	overdueBottomInfoTitle: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
		marginBottom: 8 * scale
	},
	overdueBottomInfoItem: {
		marginTop: 18 * scale,
	},
	overdueBottomInfoItemTitle: {
		color: '#0091FF',
		fontSize: 12 * scale,
		fontWeight: '800',
		marginBottom: 8 * scale
	},
	overdueBottomInfoItemCard: {
		backgroundColor: '#E4EFFA',
		borderRadius: 6 * scale,
		paddingLeft: 18 * scale,
		paddingRight: 18 * scale,
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
	},
	overdueBottomInfoItemCardHeader: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	overdueBottomInfoItemCardHeaderText: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
		fontWeight: '800',
		marginBottom: 18 * scale
	},
	overdueBottomInfoItemCardAmount: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 16 * scale
	},
	overdueBottomInfoItemCardAmountLabel: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
	},
	overdueBottomInfoItemCardAmountValue: {
		color: colorOjb.commonFontColor,
		fontSize: 12 * scale,
		fontWeight: '800',
	},
	overdueBottomInfoList: {
		marginBottom: 18 * scale
	},
	overdueBottomInfoItemCardCommonLabel: {
		flex: 1,
		color: colorOjb.commonFontColor,
		fontSize: 11 * scale,
	},
	overdueBottomInfoItemCardDate: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 6 * scale
	},
	overdueBottomInfoItemCardDetail: {
		marginBottom: 22 * scale
	},
	disNone: { height: 0, width: 0 },
	adAtive: {
		position: 'absolute',
		zIndex: -1,
		bottom: 0,
		left: 0,
		opacity: 0
	}
})